<template>
  <view class="customer-detail">
    <!-- 客户基本信息 -->
    <view class="customer-header">
      <image :src="customerInfo.avatar" class="avatar"></image>
      <view class="customer-baseinfo">
        <view class="nickname">
          {{ customerInfo.nickname }}
          <view class="gender" v-if="customerInfo.gender">
            <text v-if="customerInfo.gender === 1">男</text>
            <text v-if="customerInfo.gender === 2">女</text>
          </view>
        </view>
        <view class="mobile">{{ customerInfo.mobile }}</view>
        <view class="birthday" v-if="customerInfo.birthday">
          生日: {{ customerInfo.birthday }}
        </view>
      </view>
      <!-- 修复：使用正确的方法打开弹窗，初始化标签 -->
      <button class="edit-tag" @click="openTagEdit">
        编辑标签
      </button>
    </view>

    <!-- 标签展示 -->
    <view class="tags-section" v-if="customerInfo.tags && customerInfo.tags.length">
      <view class="section-title">客户标签</view>
      <view class="tags">
        <text v-for="(tag, index) in customerInfo.tags" :key="index" class="tag">{{ tag }}</text>
      </view>
    </view>

    <!-- 消费数据 -->
    <view class="data-card">
      <!-- 修复：每个data-item只保留对应的数据值 -->
      <view class="data-item">
        <view class="data-value">¥{{ (customerInfo.total_consume || 0).toFixed(2) }}</view>
        <view class="data-label">累计消费</view>
      </view>
      <view class="data-item">
        <view class="data-value">{{ customerInfo.order_count || 0 }}</view>
        <view class="data-label">订单总数</view>
      </view>
      <view class="data-item">
        <view class="data-value">{{ formatDate(customerInfo.last_consume_time) || '无记录' }}</view>
        <view class="data-label">最后消费</view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="info-section">
      <view class="section-title">详细信息</view>
      <view class="info-item">
        <view class="info-label">注册时间</view>
        <view class="info-value">{{ customerInfo.register_time }}</view>
      </view>
      <view class="info-item">
        <view class="info-label">最后登录</view>
        <view class="info-value">{{ customerInfo.last_login_time }}</view>
      </view>
    </view>

    <!-- 常用地址 -->
    <view class="address-section" v-if="customerInfo.address_list && customerInfo.address_list.length">
      <view class="section-title">常用地址</view>
      <view class="address-item" v-for="(addr, index) in customerInfo.address_list" :key="index">
        <view class="address-receiver">
          {{ addr.receiver }} {{ addr.mobile }}
          <text class="default-tag" v-if="addr.is_default">默认</text>
        </view>
        <view class="address-detail">
          {{ addr.province }}{{ addr.city }}{{ addr.district }}{{ addr.detail }}
        </view>
      </view>
    </view>

    <!-- 消费趋势 -->
    <view class="trend-section" v-if="customerInfo.consume_trend && customerInfo.consume_trend.length">
      <view class="section-title">近3月消费趋势</view>
      <view class="trend-chart">
        <view class="chart-bar" v-for="(item, index) in customerInfo.consume_trend" :key="index">
          <view class="bar" :style="{ height: (item.amount / maxAmount * 100) + '%' }"></view>
          <view class="bar-label">{{ item.month }}</view>
          <view class="bar-value">¥{{ item.amount }}</view>
        </view>
      </view>
    </view>

    <!-- 编辑标签弹窗 -->
    <uni-popup 
      type="bottom" 
      :show="showTagPopup" 
      @close="showTagPopup = false"
    >
      <view class="popup-content">
        <view class="popup-title">选择标签</view>
        <view class="tag-select-list">
          <!-- 修复：移除标签属性中的注释 -->
          <view 
            class="tag-select-item" 
            :class="{ selected: selectedTagIds.includes(tag.tag_id) }" 
            @click="toggleTag(tag.tag_id)"
            v-for="tag in allTags" 
            :key="tag.tag_id"
          >
            <view class="tag-checkbox" :class="{ checked: selectedTagIds.includes(tag.tag_id) }">
              <text v-if="selectedTagIds.includes(tag.tag_id)">✓</text>
            </view>
            <view class="tag-name">{{ tag.tag_name }}</view>
          </view>
        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="showTagPopup = false">取消</button>
          <button class="confirm-btn" @click="saveTags">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni/uni-popup/uni-popup.vue"

export default {
  components: {
    uniPopup
  },
  data() {
    return {
      customerInfo: {},
      customerId: '',
      allTags: [],
      selectedTagIds: [],
      showTagPopup: false
      // 修复：移除与计算属性重名的maxAmount
    }
  },
  onLoad(options) {
    this.customerId = options.customerId
    this.getCustomerDetail()
    this.getCustomerTags()
  },
  computed: {
    // 计算消费趋势图的最大金额
    maxAmount() {
      if (!this.customerInfo.consume_trend || !this.customerInfo.consume_trend.length) {
        return 1
      }
      return Math.max(...this.customerInfo.consume_trend.map(item => item.amount))
    }
  },
  methods: {
    // 获取客户详情
    getCustomerDetail() {
      this.$api.http.getCustomerDetail(this.customerId)
        .then(res => {
          if (res.status === 1) {
            this.customerInfo = res.data
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
        .catch(err => {
          console.error('获取客户详情失败:', err)
          uni.showToast({ title: '获取数据失败', icon: 'none' })
        })
    },
    
    // 获取所有标签
    getCustomerTags() {
      this.$api.http.getCustomerTags().then(res => {
        if (res.status === 1) {
          this.allTags = res.data
        }
      })
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.split(' ')[0]
    },
    
    // 打开标签编辑弹窗
    openTagEdit() {
      // 初始化已选标签
      this.selectedTagIds = this.customerInfo.tag_ids || []
      this.showTagPopup = true
    },
    
    // 切换标签选择状态
    toggleTag(tagId) {
      const index = this.selectedTagIds.indexOf(tagId)
      if (index > -1) {
        this.selectedTagIds.splice(index, 1)
      } else {
        this.selectedTagIds.push(tagId)
      }
    },
    
    // 保存标签
    saveTags() {
      this.$api.http.editCustomerTags({
        customer_id: this.customerId,
        tag_ids: this.selectedTagIds
      }).then(res => {
        if (res.status === 1) {
          uni.showToast({
            title: '标签更新成功',
            icon: 'none'
          })
          this.showTagPopup = false
          // 重新获取客户详情刷新标签
          this.getCustomerDetail()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
/* 样式部分保持不变 */
.customer-detail {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .customer-header {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 15px;
    }
    
    .customer-baseinfo {
      flex: 1;
      
      .nickname {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        
        .gender {
          margin-left: 10px;
          padding: 2px 8px;
          background-color: #f0f0f0;
          border-radius: 10px;
          font-size: 12px;
        }
      }
      
      .mobile {
        color: #666;
        margin-bottom: 5px;
      }
      
      .birthday {
        font-size: 14px;
        color: #999;
      }
    }
    
    .edit-tag {
      padding: 5px 15px;
      background-color: #fa436a;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }
  
  .tags-section {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    
    .tags {
      display: flex;
      flex-wrap: wrap;
      
      .tag {
        display: inline-block;
        background-color: #e8f4fd;
        color: #409eff;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
  
  .data-card {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    
    .data-item {
      text-align: center;
      
      .data-value {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #e53e3e;
      }
      
      .data-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .info-section, .address-section, .trend-section {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        color: #666;
      }
      
      .info-value {
        font-weight: 500;
      }
    }
    
    .address-item {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .address-receiver {
        margin-bottom: 5px;
        .default-tag {
          display: inline-block;
          background-color: #fa436a;
          color: #fff;
          font-size: 12px;
          padding: 1px 5px;
          border-radius: 3px;
          margin-left: 5px;
        }
      }
      
      .address-detail {
        color: #666;
        font-size: 14px;
      }
    }
    
    .trend-chart {
      display: flex;
      align-items: flex-end;
      height: 200px;
      padding: 10px 0;
      
      .chart-bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .bar {
          width: 30px;
          background-color: #fa436a;
          border-radius: 4px 4px 0 0;
          margin-bottom: 5px;
        }
        
        .bar-label {
          font-size: 12px;
          margin-bottom: 5px;
        }
        
        .bar-value {
          font-size: 12px;
          color: #e53e3e;
        }
      }
    }
  }
  
  .popup-content {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px;
    
    .popup-title {
      text-align: center;
      font-size: 16px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .tag-select-list {
      max-height: 400px;
      overflow-y: auto;
      
      .tag-select-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        
        .tag-checkbox {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          border: 1px solid #ccc;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          font-size: 16px;
          
          &.checked {
            background-color: #fa436a;
            border-color: #fa436a;
            color: #fff;
          }
        }
      }
    }
    
    .popup-footer {
      display: flex;
      margin-top: 20px;
      
      .cancel-btn, .confirm-btn {
        flex: 1;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        font-size: 16px;
      }
      
      .cancel-btn {
        background-color: #f5f5f5;
        color: #333;
        border: none;
        margin-right: 10px;
      }
      
      .confirm-btn {
        background-color: #fa436a;
        color: #fff;
        border: none;
      }
    }
  }
}
</style>
